<html>
<head>
    <title>用户管理</title>
    <link rel="stylesheet" href="../../../assets/theme-chalk/index.css">
    <link rel="stylesheet" href="../../../style.css">

    <style>
        body {
            background: #F2F2F2;
        }

        .main-head {
            background: #fff;
            padding-left: 10px;
            padding-top: 10px;
            margin-bottom: 0px;
            border: solid 1px #fff;
        }

        .chart-outer {
            height: 200px;
        }

        .table {
            border: 1px solid #ddd;
            border-collapse: collapse;
        }

        .table thead tr th,
        .table tbody tr td {
            padding: 8px 12px;
            text-align: center;
            color: #333;
            border: 1px solid #ddd;
            border-collapse: collapse;
            background-color: #fff;
        }

    </style>
</head>
<body>
<div class="page" id="page-monitor">
    <div class="page-main">
        <div class="main-head">
            <el-form :inline="true" size="small" :model="searchForm">
                <el-form-item label="物资大类">
                    <el-input placeholder="物资大类" style="width: 150px;" v-model="bigClass"></el-input>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="btnSearch">查询</el-button>
                    <el-button type="success" @click="btnAdd">新增大类</el-button>
                </el-form-item>
            </el-form>
            <el-table :data="tableData" style="width: 100%;" height="600">
                <el-table-column type="index" width="100" label="序号"></el-table-column>
                <el-table-column prop="bigClass" label="物资大类名称"></el-table-column>
                <el-table-column label="操作" width="280">
                    <template slot-scope="scope">
                        <el-button @click="btnEdit(scope.row)" round size="small" icon="el-icon-edit"></el-button>
                        <el-button round icon="el-icon-delete" size="small" @click="deleteClick(scope.row)"></el-button>
                        <el-button round icon="el-icon-money" size="small" @click="smallmanage(scope.row)">小类管理</el-button>
                        <!-- <el-button type="text" @click="smallmanage(scope.row)">小类管理</el-button> -->
                    </template>
                </el-table-column>
            </el-table>
            <div class="page-footer">
                <el-pagination background layout="prev, pager, next" :pagesize="pagesize" :total="totalCount"
                               :current-page.sync="pageno" @current-change="onChangePage">
                </el-pagination>
            </div>
        </div>
    </div>
<!-- 大类新增或编辑 -->
    <el-dialog :title="editMod?'编辑':'新增'" :visible.sync="addVisible" :show-close="false" width="50%" style="display: none">

        <el-form :model="addForm">
            <el-form-item label="大类名称">
                <el-input placeholder="请输入" style="width: 200px;" v-model="addForm.bigClass"></el-input>
            </el-form-item>
        </el-form>

        <span slot="footer" class="dialog-footer">
                    <el-button style="text-align: center" @click="addCancel()">取消</el-button>
                    <el-button type="primary" @click="addSubmit()" style="text-align: center">确定</el-button>
            </span>
    </el-dialog>
<!-- 小类列表 -->
    <el-dialog title="小类管理" :visible.sync="smallvisible" :show-close="false" width="70%" style="display: none">

        <div class="main-head">
            <el-button type="success" @click="newaddsmall">新增小类</el-button>
            <el-table :data="smalltableData" style="width: 100%;margin-top:50px;" height="600">
                <el-table-column type="index" width="100" label="序号"></el-table-column>
                <el-table-column prop="smallClass" label="物资小类名称"></el-table-column>
                <el-table-column label="操作" width="280">
                    <template slot-scope="scope">
                        <el-button @click="smallupdate(scope.row)" round size="small" icon="el-icon-edit"></el-button>
                        <el-button @click="smalldelete(scope.row)" round icon="el-icon-delete" size="small"></el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="page-footer">
                <el-pagination background layout="prev, pager, next" :pagesize="smallparam.pagesize" :total="smalltotalCount"
                               :current-page.sync="smallparam.pageno" @current-change="onChangePage1">
                </el-pagination>
            </div>
        </div>
    </el-dialog>
<!-- 新增、编辑小类 -->
    <el-dialog :title="smalleditMod?'编辑':'新增'" :visible.sync="smallvisible1" :show-close="false" width="50%" style="display: none">

        <!-- <el-divider content-position="right">
            <el-button type="primary" icon="el-icon-plus" size="small" @click="addTypeContent">添加一行</el-button>
        </el-divider>
        <table width="100%" cellspacing="0" cellpadding="0" class="table" style="text-align: center">
            <tr>
                <th style="width:10%">序号</th>
                <th style="width:50%;color: red">子类别名称</th>
                <th style="width:10% ">操作</th>
            </tr>
            <tr v-for="(item,i) in TypeContent">
                <td>
                    {{i+1}}
                </td>
                <td>
                    <el-input v-model="item.content"/>
                </td>
                <td>
                    <el-button @click="delTypeContent(i)" type="warning" size="mini">删除</el-button>
                </td>
            </tr>
        </table> -->
        <el-form :model="smalladdparam" ref="smalladdparam" :inline="true" label-position="left">
            <el-form-item  :rules="[{required:true,message:'请输入小类名称!',trigger:'blur'}]" prop="smallClass" label="小类名称">
                <el-input  placeholder="小类名称" style="width: 150px;" v-model="smalladdparam.smallClass"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button style="text-align: center" @click="smallCancel()">取消</el-button>
            <el-button type="primary" @click="smallSubmit()"style="text-align: center">确定</el-button>
        </span>
    </el-dialog>

</div>


<script type='text/javascript' src='../../../assets/bundle.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/bundle.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/jquery-1.11.2.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/echarts.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/common.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/component.js' charset='utf-8'></script>


<script>

    var vuePage = new Vue({
        el: '#page-monitor',
        data: {
            searchForm: {},
            tableData: [],
            pagesize: 10,
            pageno: 1,
            totalCount: 10,
            addVisible: false,
            addForm: {},
            TypeContent: [],
            editMod: false,
            bigClass: '',
        // 小类
            smallvisible: false,
            smalltableData: [],
            smallparam: {
                bigClassId: '',
                pagesize: 10,
                pageno: 1,
            },
            smalltotalCount: 10,
        // 小类编辑
            smalleditMod: false,
            smallvisible1: false,
            smallid: '',
            smalladdparam: {},
        },
        methods: {
        // 大类
            onChangePage(page) {
                this.pageno = page;
                this.getClassList();
            },
            btnEdit(row) {
                this.addForm.Id = row.Id;
                this.addForm.bigClass = row.bigClass;
                this.addVisible = true;
                this.editMod = true;
            },
            btnAdd() {
                this.addVisible = true;
                this.addForm = {bigClass: ''};
                this.editMod = false;
            },
            btnSearch() {
                this.getClassList();
            },
            // 取消新增
            addCancel() {
                this.addVisible = false;
                this.addForm = {bigClass: ''};
                this.TypeContent = [];
            },
            // 大类新增或编辑
            addSubmit() {
                let param = {};
                if (!this.addForm.bigClass) {
                    this.$message.error('大类名称不能为空!');
                    return;
                }
                param.bigClass = this.addForm.bigClass;

                if (this.editMod) {
                    param.Id = this.addForm.Id;
                    param.projectNo = SiteConfig.account.projectNo;

                    HttpUtil.get('EmergenceSupplies/BigClassUpdate', param).success((r) => {
                        this.addCancel();
                        this.getClassList();
                        this.$message({
                            type: 'success',
                            message: '修改成功!'
                        });
                    })
                } else {
                    param.projectNo = SiteConfig.account.projectNo;
                    HttpUtil.get('EmergenceSupplies/BigClassAdd', param).success((r) => {
                        this.addCancel();
                        this.getClassList();
                        this.$message({
                            type: 'success',
                            message: '添加成功!'
                        });
                    })
                }
            },
            // 大类删除 大类下面有子类不允许删除
            deleteClick(row) {
                this.$confirm('此操作将永久删除, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    center: true
                }).then(() => {
                    let param = {
                        bigClassId: row.Id,
                        pageno: 1,
                        pagesize: 10,
                    };
                    HttpUtil.get('EmergenceSupplies/BigClassDelete', {Id: row.Id}).success((res) => {
                        if (res.state == 0) {
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            this.getClassList();
                        }
                        else {
                            this.$message({
                                type: 'info',
                                message: res.errMsg
                            });
                        }

                    })

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
        // 小类管理
            // 显示小类列表
            getsmall(){
                let param = this.smallparam;
                HttpUtil.get('EmergenceSupplies/SmallClassList', param).success((r) => {

                    if (r.state == 0) {
                        this.smalltableData = r.data;
                        this.smalltotalCount = r.total;
                    } else {
                        this.$message.warning('错误' + r.errMsg)
                    }

                })
            },
            smallmanage(row){
                this.smallvisible = true;
                this.smallparam.bigClassId = row.Id;
                this.getsmall();
            },
            // 新增小类
            newaddsmall(){
                this.smalleditMod = false;
                this.smallvisible1 = true;
            },
            // 编辑小类
            smallupdate(row){
                this.smalleditMod = true;
                this.smallvisible1 = true;
                this.smallid = row.Id;
                this.smalladdparam= Object.assign({},this.smalladdparam, row);
            },
            // 小类删除
            smalldelete(row){
                HttpUtil.get('EmergenceSupplies/SmallClassDelete', {Id: row.Id}).success((r) => {
                    this.getsmall();
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                })
            },
            smallCancel(){
                this.smallvisible1 = false;
                this.TypeContent = [];
                this.smalladdparam = {};
            },
            smallSubmit(){
                if (!this.smalladdparam.smallClass) {
                    this.$message.error('小类名称不能为空!');
                    return;
                }
                let param = {};

                if(this.smalleditMod){
                    // 编辑
                    param.smallClass = this.smalladdparam.smallClass;
                    param.bigClassId = this.smallparam.bigClassId;
                    param.Id = this.smallid;
                    HttpUtil.get('EmergenceSupplies/SmallClassUpdate', param).success((r) => {
                        this.smallCancel();
                        this.getsmall();
                        this.$message({
                            type: 'success',
                            message: '修改成功!'
                        });
                    })
                }else{
                    // 新增
                    param.bigClassId = this.smallparam.bigClassId;
                    param.smallClass = this.smalladdparam.smallClass;

                    HttpUtil.get('EmergenceSupplies/SmallClassAdd', param).success((r) => {
                        this.smallCancel();
                        this.getsmall();
                        this.$message({
                            type: 'success',
                            message: '添加成功!'
                        });
                    })
                }
            },
            // 小类表格页码变化
            onChangePage1(page){
                this.smallparam.pageno = page;
                this.getsmall();
            },
        //
            handleClick(row) {},
        //

            delTypeContent(index) {
                this.TypeContent.splice(index, 1);
            },
            addTypeContent() {
                this.TypeContent.push({content: ''});
            },

            // onChangePage(page) {
            //
            // },
        // 获取大类列表
            getClassList() {
                var param = {};
                param.pageno = this.pageno;
                param.pagesize = this.pagesize;
                param.projectNo = SiteConfig.account.projectNo;
                if (this.bigClass) {
                    param.bigClass = this.bigClass;
                }


                HttpUtil.get('EmergenceSupplies/BigClassList', param).success((r) => {

                    if (r.state == 0) {
                        this.tableData = r.data;
                        this.totalCount = r.total;
                    } else {
                        this.$message.warning('错误' + r.errMsg)
                    }

                })
            },
        },
        created: function () {
            $('.page').show();
        },
        mounted: function () {
            this.getClassList();
        }
    });


</script>

</body>
</html>
